<template>
    <div>
        <!-- 表单查询 -->
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="姓名：">
                <el-input v-model="searchForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="提交日期：">
                <el-date-picker v-model="searchForm.Times" type="date" placeholder="结算日期查询">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="是否结算：">
                <el-select v-model="searchForm.pid" clearable placeholder="是否结算">
                    <el-option v-for="item in positionList" :key="item.pid" :label="item.pname" :value="item.pid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="handlerSearchSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="handlerSearchSubmit">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格渲染 -->
        <el-table :data="tableData" style="width: 100%" border tooltip-effect="dark" :header-cell-style="{ 
        background:'#3e9acc',color:'#000000',fontWeight: 'normal', border: '1px solid tan', fontSize: '12px'}">
            <el-table-column align="center" label="会员编号" prop="date" />
            <el-table-column align="center" label="姓名" prop="name" />
            <el-table-column align="center" label="手机号" prop="name" />
            <el-table-column align="center" label="身份证号" prop="name" />
            <el-table-column align="center" label="提交日期" prop="name" />
            <el-table-column align="center" label="状态" prop="name" />
            <el-table-column align="center" label="审核人" prop="name" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">结算</el-button>
                    <el-button size="mini" type="warning" @click="handleDelete(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="block" style="margin-top: 15px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>
    </div>
</template>

<script>
// import { log } from 'util';
export default {
    data() {
        return {
            //分页器
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,

            //查询
            search: '',
            searchForm: {
                sname: '',
                Times: '',
                pid: ''
            },

            //表格
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'John',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Morgan',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Jessy',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ],

            //下拉框
            positionList: {
                pid: '',
                pname: '',
            }
        }
    },
    methods: {
        //结算按钮
        handleEdit(index, row) {
            console.log(index, row);
        },
        //详情按钮
        handleDelete(index, row) {
            console.log(index, row);
        },
        //查询按钮
        handlerSearchSubmit() {
            console.log(1111111);
        },

        //分页器的两个按钮
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    computed: {

    }
}
</script>

<style scoped>
::v-deep(.el-input__inner) {
    height: 34px;
}

.el-form,
.el-form--inline {
    text-align: left;
}

::v-deep(.el-table > tr) {
    height: 10px;
}
</style>